<template>
  <section class="e-articleList">
    <section class="e-breadcrumb">
      <el-breadcrumb>
        <el-breadcrumb-item to="/article/list">商品一部</el-breadcrumb-item>
        <el-breadcrumb-item>新增</el-breadcrumb-item>
      </el-breadcrumb>
    </section>
    <section class="e-main">
      <section class="e-articlePublish-content">
        <h3>新增</h3>
        <el-form class="e-articlePublish-form" ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="标题">
            <el-input type="textarea" v-model="form.desc" placeholder="请填写标题" :autosize="{ minRows: 1, maxRows: 2}" maxlength="100" required></el-input>
          </el-form-item>
          <el-form-item label="分类">
            <el-select v-model="form.type" placeholder="请选择分类">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="消息分类">
            <el-select v-model="form.type" placeholder="请选择消息分类">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="封面图片">
            <el-upload
              class="e-articlePublish-uploadImg"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleImgChange"
              :show-file-list="false"
              :multiple="false"
              :limit="1"
              :auto-upload="false"
              :on-exceed="imgUploadExceed"
              :with-credentials="true"
              :file-list="imgList">
              <div class="e-articlePublish-image">
                <img  v-img-lazy="imgUrl"/>
                <div class="e-color-theme e-articlePublish-imageText" v-show="!imgUrl">+添加封面图片</div>
              </div>
              <!--<span class="e-color-theme">+添加封面图片</span>-->
              <div slot="tip" class="el-upload__tip">建议尺寸900*500</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="摘要" placeholder="请填写摘要" :autosize="{ minRows: 1, maxRows: 4}" maxlength="70">
            <el-input type="textarea" v-model="form.desc"></el-input>
          </el-form-item>
          <el-form-item label="发布对象">
            <el-select v-model="form.type" placeholder="请选择发布对象">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="正文">
            <quill-editor v-model="form.content"
                          ref="myQuillEditor"
                          :options="editorOption"
                          @blur="onEditorBlur($event)"
                          @focus="onEditorFocus($event)"
                          @ready="onEditorReady($event)">
            </quill-editor>
          </el-form-item>
          <el-form-item label="附件">
            <el-upload
              class="e-articlePublish-uploadFile"
              action="https://jsonplaceholder.typicode.com/posts/"
              :on-change="handleImgChange"
              :show-file-list="true"
              :multiple="true"
              :limit="5"
              :auto-upload="false"
              :on-exceed="imgUploadExceed"
              :with-credentials="true"
              :file-list="imgList">
              <span class="e-color-theme">添加附件</span>
              <div slot="tip" class="el-upload__tip">只能上传20M以下文件</div>
            </el-upload>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveSystem">仅保存到系统</el-button>
            <el-button type="primary" @click="saveDraft">保存草稿</el-button>
            <el-button type="primary" v-show="timePublish.isTimePublish" @click="setTimePublish">定时发布</el-button>
            <el-button type="primary" v-show="!timePublish.isTimePublish" @click="cancelTimePublish">取消定时</el-button>
            <el-button type="primary">发布</el-button>
          </el-form-item>
        </el-form>
      </section>
    </section>
    <el-dialog :modal="false" :title="timePublish.title" width="400px" :visible.sync="timePublish.isTimePublishShow">
      <p>定时发送时间</p>
      <el-date-picker
        style="margin-top: 10px"
        v-model="timePublish.time"
        type="datetime"
        placeholder="选择日期时间">
      </el-date-picker>
      <div slot="footer" class="e-dialog-footer">
        <el-button @click="timePublish.isTimePublishShow = false">取 消</el-button>
        <el-button type="primary" @click="saveTimePublish">确 定</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
// import articleApi from '@/apis/article'
// import apiConfig from '@/apis/config'
import { upload } from '@/config/business'
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      editorOption: {},
      rules: {
        title: [{required: true, trigger: 'blur', message: '标题不能为空'}],
        category: [{required: true, trigger: 'blur', message: '分类不能为空'}],
        description: [{required: true, trigger: 'blur', message: '摘要不能为空'}],
      },
      form: {
        title: '', // 标题
        author: '0832', // 创建者
        cover: '', // 封面
        status: '', // 发布状态1=草稿;2=仅存储;3=已发布;4=定时发布
        sendFlag: 0, // 发送状态 0立即1定时
        sendTime: '', // 发送时间
        category: '', // 分类
        content: '', // 正文内容
        description: '' // 摘要
      },
      imgUrl: '', // 图片预览
      imgList: [], // 图片列表
      params: {},
      timePublish: {
        isTimePublish: true, // 是否定时发布
        title: '定时发送',
        time: '',
        isTimePublishShow: false
      }
    }
  },
  methods: {
    fileAdd (file, event) {
      const limits = [
        {
          condition: upload.limitSize < file.size,
          message: '只支持20M以下的文件上传'
        },
        {
          condition: this.$refs['fileUploader'].fileList.length > 5,
          message: '只支持上传五个附件'
        }
      ]
      limits.some((limit) => {
        if (limit.condition) {
          file.ignored = true
          this.$message({
            message: limit.message,
            type: 'error'
          })
          return true
        }
        return false
      })
    },
    onEditorBlur () {
      console.log(this.form.content)
    },
    onEditorFocus () {
    },
    onEditorReady () {
    },
    saveSystem () {

    },
    imgUploadExceed (files, fileList) {
      console.dir(arguments)
    },
    handleImgChange (file, fileList) {
      this.imgUrl = URL.createObjectURL(file.raw)
    },
    setTimePublish () {
      this.timePublish.isTimePublishShow = true
    },
    cancelTimePublish () {
      this.timePublish.title = '取消定时发送'
      this.timePublish.isTimePublishShow = true
    },
    saveTimePublish () {
      if (this.timePublish.isTimePublish) { // 是否是定时发送
        if (this.timePublish.time) {
          this.timePublish.isTimePublishShow = false
          this.timePublish.isTimePublish = false
        } else {
          this.$message({
            message: '您还未选择发布时间',
            type: 'error'
          })
        }
      } else { // 取消定时发送
        this.timePublish.time = ''
        this.timePublish.isTimePublishShow = false
      }
    }
  },
  activated () {
  }
}
</script>
<style lang="scss" scoped="scoped">
  @import "../../styles/element";

  .e-articlePublish-content {
    background: $--color-white;
    padding: 16px;
  }

  .e-articlePublish-form {
    padding: 36px;
  }

  .e-articlePublish-image {
    position: relative;
    &,img {
      display: inline-block;
      width: 300px;
      height: 150px;
    }
  }
  .e-articlePublish-imageText{
    position: absolute;
    width: 100px;
    line-height: 20px;
    height: 20px;
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  }

  /deep/ {
    .el-dialog__body{
      border-top: $--border-base;
      border-bottom: $--border-base;
    }
    .el-input {
      width: 180px;
    }
    .el-textarea {
      width: 300px;
    }
    .e-articlePublish-uploadFile {
      .uploader-btn {
        border: 0;
        &:hover {
          background: $--color-white;
        }
      }
      .uploader-list {
        border: 0;
        background: $--color-white;
      }
      .uploader-drop {
        background: $--color-white;
        border: 0;
        padding-top: 0;
        padding-left: 0;
        text-decoration: underline;
      }
    }
    .e-articlePublish-uploadImg {
      .uploader-btn {
        border: 0;
        color: $--color-primary;
        padding: 0;
        line-height: 150px;
        height: 150px;
        width: 300px;
        display: inline-block;
        text-align: center;
        &:hover {
          background: #f5f5f5;
        }
      }
      .uploader-drop {
        border-style: solid;
        padding: 0;
        text-decoration: underline;
        width: 300px;
        height: 150px;
      }
    }
  }
  .e-dialog-footer{
    text-align: center;
  }
</style>
